<template>
<div class="distribution-wrap">
    <div class="header clearfix">
        <div class="l acvatar">
            <van-image width="70" height="70" round :src="userInfo.avatar || 'https://img.yzcdn.cn/vant/cat.jpeg'" />
        </div>
        <div class="l header-title" style="padding: 0 0 0 10px;">
            <p style="color: #232323;font-size: 16px;">{{userInfo.nickname != '昵称' ? userInfo.nickname :  userInfo.nickname+userInfo.id}} <span style="font-size: 10px;height: 24pxdisplay:inline-block;padding: 2px 6px;background-color: rgb(213,165,58);border-radius:4px; color: white;">运营商</span> </p>
            <p style="color: #232323">邀请码:
                <input id='input_url' v-model='product_code' style='opacity: 0;position: absolute;' type="text">
                <input v-model='product_code' disabled type="text" style="max-width: 150px;border: none;background: transparent;">
                <button @click="codeCopy" style="padding: 0 8px;height: 23px;line-height: 15px;border:none;font-size: 12px;display:inline-block;background-color: rgb(213,165,58);border-radius:4px; color: white;">复制</button> </p>
        </div>
    </div>

    <div class="clearfix" style="margin-top: 10px;;padding: 5px 15px 5px 20px;background-image: linear-gradient(to right, rgb(241,163,63) 0%, rgb(250,88,91) 100%);border-radius: 4px;">
        <div class="l">
            <h3 style="color: white;font-size: 16px;margin: 0;">邀请好友注册,粉丝越多收益越高</h3>
        </div>
        <div class="r">
            <button @click="getShare" style="padding: 2px 15px;border:none;border-radius: 10px;background-color: white;color: red;">去邀请</button>
        </div>
    </div>

    <div class="container">
        <div class="plank shadow">
            <router-link to="../withdraw/income">
                <div class="plank-header" style="font-size: 16px;">
                    <span>我的资产</span> &nbsp;
                    <van-icon style="vertical-align: text-bottom;" name="arrow" size="18" />
                </div>
            </router-link>
            <div class="plank-container clearfix" style="padding-bottom: 5px;">
                <div class="l" style="border-right: 1px solid rgba(170,170,170,.5);min-width: 70%; padding: 5px 10px;">
                    <div>
                        <p size30>{{ money.day }}</p>
                        <span style="font-size: 12px;;color: #999">今日收入(元)</span>
                    </div>
                    <div class="clearfix">
                        <div class="l" style="width: 50%;margin-right: 2px;">
                            <p size30>{{ money.month }}</p>
                            <span style="font-size: 12px;;color: #999">本月收入(元)</span>
                        </div>
                        <div class="l" style="margin-left: 20px;">
                            <p size30>{{ userInfo.account.bonus }}</p>
                            <span style="font-size: 12px;;color: #999">累计估计(元)</span>
                        </div>
                    </div>
                </div>
                <div class="l" style="min-width: 30%;">
                    <h1 style="text-align: center;font-size: 16px;">{{ userInfo.account.money }}</h1>
                    <p style="color: #999;margin: 10px 0 15px;text-align: center;font-size: 12px;">可提现余额</p>
                    <p style="text-align: center;">
                        <router-link to="../withdraw">
                            <button style="background:rgba(212,174,38,.9);font-size: 12px;border:none;color: white;padding: 5px 20px;border-radius: 4px;">去提现</button>
                        </router-link>
                    </p>
                </div>
            </div>
        </div>
        <div class="plank">
            <router-link to="./team">
                <div class="plank-header" style="font-size: 16px;">
                    <span>团队管理</span> &nbsp;
                    <van-icon style="vertical-align: text-bottom;" name="arrow" size="18" />
                </div>
            </router-link>
            <div class="plank-container items" v-if="fans">
                <router-link to="./team">
                    <div class="item">
                        <h3>{{ fans.users }}</h3>
                        <span>已邀会员</span>
                    </div>
                    <div class="item">
                        <h3>{{ fans.freeStore }}</h3>
                        <span>免费商铺</span>
                    </div>
                    <div class="item">
                        <h3>{{ fans.vipStore }}</h3>
                        <span>分店商铺</span>
                    </div>
                    <div class="item">
                        <h3>{{ fans.manager }}</h3>
                        <span>店长</span>
                    </div>
                </router-link>
                <!-- <div class="item">
                    <h3>0</h3>
                    <span>今日新增VIP</span>
                </div>
                <div class="item">
                    <h3>0</h3>
                    <span>今日有效VIP</span>
                </div>
                <div class="item">
                    <h3>0</h3>
                    <span>本月有效VIP</span>
                </div>
                <div class="item">
                    <h3>0</h3>
                    <span>累计有效VIP</span>
                </div> -->
            </div>
        </div>

    </div>

</div>
</template>

<script>
export default {
    name: 'Distribution',
    data() {
        return {
            userInfo: null,
            product_code: '暂无',
            money: {
                day: 0.00,
                month: 0.00
            },
            fans: null
        }
    },
    created() {
        this.userInfo = this.global.state.userInfo;
        console.log(this.userInfo);
        this.getData()
    },
    methods: {
        getShare() {
            this.$router.push({
                path: '../drawApply/share'
            })
        },
        getData() {
            let params = {};
            params.token = sessionStorage.getItem("token");
            this.axios.get('/api/reseller/dividend/stats/today', {
                params
            }).then(res => {
                this.money.day = res.data.data;
            }).catch(err => {
                console.log(err);

            })
            this.axios.get('/api/reseller/dividend/stats/month', {
                params
            }).then(res => {
                this.money.month = res.data.data;
            }).catch(err => {
                console.log(err);

            })
            this.axios.get('/api/reseller/fans', {
                params
            }).then(res => {
                this.fans = res.data.data;
                console.log(this.fans);

            }).catch(err => {
                console.log(err);

            })
        },
        codeCopy() {
            var input = document.querySelector('#input_url');
            input.select();
            document.execCommand("Copy");
            console.log(clipboardData.getData("Text"))
        }
    }
}
</script>

<style lang="less" scoped>
.distribution-wrap {
    padding: 5px 10px;

    .header-title {
        p {
            line-height: 36px;
        }
    }

    p,
    h1 {
        color: rgb(212, 174, 38);
        margin: 0;
    }

    .container {
        .plank {
            background-color: white;
            border-radius: 4px;
            margin: 10px 0;
        }
    }
}

.items {
    .item {
        display: inline-block;
        width: 25%;
        text-align: center;
        margin: 10px 0;

        h3 {
            margin: .25rem 0;
            color: rgb(212, 174, 38)
        }

        span {
            color: #999;
        }
    }
}

p[size30] {
    font-size: 22px;
    margin: 5px 0;
}

.plank-header {
    line-height: 44px;
}
</style>
